<template>
    <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" @keyup.enter="onRegister">
        <el-form-item prop="username">
            <el-input v-model="registerForm.username" :prefix-icon="User" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="account">
            <el-input v-model="registerForm.realName" :prefix-icon="Message" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="registerForm.password" :prefix-icon="Lock" show-password placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item prop="userType">
            <el-select v-model="registerForm.userType" :prefix-icon="UserFilled" placeholder="请选择身份">
                <el-option label="学生" value="0" />
                <el-option label="教师" value="1" />
            </el-select>
        </el-form-item>
        <el-form-item class="register-button">
            <el-button type="primary" @click="onRegister">立即注册</el-button>
        </el-form-item>
        <div class="login-link">
            已有账号？<el-button link @click="switchToLogin">去登录</el-button>
        </div>
    </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { User, Lock, Message, UserFilled } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// import { emailRegExp, mobileRegExp } from '@/utils/validate'
import { useRegisterApi } from '@/api/auth'

const router = useRouter()
const registerFormRef = ref()

// 注册表单数据
const registerForm = reactive({
    username: '',
    realName: '',
    password: '',
    userType: ''
})

// 验证规则
const registerRules = reactive({
    username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
    realName: [
        { required: true, message: '姓名不能为空', trigger: 'blur' }],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
        { min: 6, message: '密码长度至少6位', trigger: 'blur' }
    ],
    userType: [{ required: true, message: '请选择身份', trigger: 'change' }]
})

// 注册提交
const onRegister = () => {
    registerFormRef.value.validate(async (valid: boolean) => {
        if (!valid) return

        try {
            await useRegisterApi(registerForm)
            ElMessage.success('注册成功，请登录')
            // 修改原有router.push
            router.push({
                path: '/login',
                query: { 
                    type: 'account',  // 新增参数
                    timestamp: Date.now() // 防止路由缓存
                }
            })
        } catch (error) {
            ElMessage.error('注册失败，请重试')
        }
    })
}

// 切换到登录
const switchToLogin = () => {
    // 修改原有router.push
router.push({
    path: '/login',
    query: { 
        type: 'account',  // 新增参数
        timestamp: Date.now() // 防止路由缓存
    }
})
}
</script>

<style lang="scss" scoped>
.register-button {
    :deep(.el-button) {
        width: 100%;
        height: 45px;
        font-size: 16px;
    }
}
.login-link {
    margin-top: 15px;
    text-align: center;
    color: #666;
    .el-button {
        padding: 0 5px;
    }
}
</style>